<!-- 外汇热门列表 -->
<template>
  <div class="foreign-hot">
    <div class="grid-container">
      <div class="item flex flex-col rounded-xl pt-10" v-for="item in hotData" :key="item.id">
        <div class="header flex justify-between items-center my-10">
          <div class="currency-pair ml-10">
            <img class="flag" :src="item.flag" alt="flag"/>
            <span class="name font-22">{{ item.name }}</span>
          </div>
          <span class="change font-20 pr-10" :class="{'up': item.change >= 0, 'down': item.change < 0}">
            {{ item.change >= 0 ? '+' : '' }}{{ item.change }}%
          </span>
        </div>
        <div class="price font-26  ml-20">${{ formatPrice(item.price) }}</div>
        <div class="chart">
             <img class="center-img" :src="getChangeRatioImage(item.change)">
          <!-- <k-line-charts :chartData="item.klineData" /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import KLineCharts from '@/components/kline-charts'

export default {
  name: 'ForeignHot',
  components: {
    KLineCharts
  },
  props: {
    hotData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    formatPrice(price) {
      return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    getChangeRatioImage(changeRatio){
            return changeRatio > 0 ? require('@/assets/image/market/up.png') : require('@/assets/image/market/down.png');
        }
  }
}
</script>

<style lang="scss" scoped>
.foreign-hot {
  padding: 1rem 0;

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    // padding: 0.5rem;
  }

  .item {

    background: #1C1C1E;
    // display: flex;
    // flex-direction: column;

    .header {
     
      margin-bottom: 1rem;

      .currency-pair {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .flag {
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
        }

        .name {
          color: #FFFFFF;
        }
      }

      .change {
        &.up {
          color: #2abc5a
        }

        &.down {
          color: #c7697f;
        }
      }
    }

    .price {
      color: #FFFFFF;
      margin-bottom: 1rem;
    }

    .chart {
      flex: 1;
      height: 4rem;
      img {
        width: 100%;
        height: 100%;
      }
     
    }
  }
}
</style>